<template>
  <div>
  <preHeader></preHeader>
  <div class="top-block"></div>
 <div class="nav">
    <mt-button v-for='(item,index) in menu' size="small" :key='index'  v-if='index < 4' :class="{'active':currentSort==item.id}">{{item.name}}</mt-button>
  </div>

  <div class="submenu">
    <p class="select">选择具体问题</p>
    <span class="item" v-for="(item,index) in submenu" :key='index' :class="{'menuactive':submenuActive==item.id}">{{item.name}}</span>
  </div>

  <div class="text">
  <p class="content">
    {{backContent.content}}
    <div class="imgbox">
      <img v-for="(item,index) in backContent.images" :src="item" alt="">
    </div>
  </p>
   <hr>
   <div class="problem">
     <p>是否解决了您的问题</p>
     <span class="yes" :class="{'is':is =='1'}" @click="clickProblem(1)">已解决</span>
     <span class="no" :class="{'is':is=='0'}" @click="clickProblem(0)">未解决</span>
   </div>
  </div>
  </div>
</template>

<script>
  import {get_problem_menu,get_problem_submenu,get_problem,solve_problem} from '@/api/'
  export default {
    data(){
      return{
        id:'',//问题的id
        currentSort:'0',
        menu:'',//反馈一级栏目
        submenu:'',//反馈二级栏目
        submenuActive:'',
        backContent:'',//反馈内容
        is:'',//是否解决
        isno:'',
      }
    },
    methods:{
      getMenu(){//获取默认一级栏目
        get_problem_menu().then(res=>{
          console.log(res)
          this.menu = res.data;
        })
      },
      getBackDetail(){//获取反馈内容
        get_problem({id:this.id}).then(res =>{
          if(res.data.is_solve == '1'){
            this.is = '1'
          }else{
            this.is = '0'
          }
          this.currentSort = res.data.menu;
          this.backContent = res.data;
          this.submenuActive = res.data.submenu;
          get_problem_submenu({id:res.data.menu}).then(res=>{
            console.log(res)
            this.submenu = res.data;
          })
        })
      },
      clickProblem(id){//点击返回解决未解决
        solve_problem({id:this.id,is_solve:id}).then(res =>{
          console.log(res)
          if(res.status == 1){
            if(this.is == 1){
              this.is = 0
            }else{
              this.is = 1
            }
          }
        })
      }
    },
    mounted() {
      this.id = this.$route.query.id;
      this.getBackDetail();
      this.getMenu();


    }
  }
</script>

<style scoped>
.nav{display: flex;justify-content: space-around;border-bottom: 1px solid #ccc;}
.nav .mint-button{margin: 4px;}
.item{padding: 15px;font-size: 12px;color: #666666;}
.label-group{margin-top: 10px;}
.label-group span{color:#999;font-size: 12px;padding: 6px 10px;display: inline-block;border: 1px solid #ccc;border-radius: 4px;}
.text > textarea{ width: 90%;margin: 0.75rem  0;border: none;outline: none;padding-left: 1.125rem;height: 6.5rem ;}
.active{color: #fff;background-color: #2f3953;}
.submenu{padding-left: 1em;}
.select{color: #666;font-size: 12px;line-height: 30px;}
.submenu .item{font-size: 12px;color: #999;display: inline-block;padding: 4px 8px;border: 1px #777 solid;border-radius: 4px;margin-right: 6px;}
.submenu .menuactive{color: #ff9c4c;border: 1px solid #ff9c4c;}
.mint-button--large{margin-top: 6em;background-color: #151244;color: #fff;}
.text{padding: 1em;font-size: 14px;color: #999;}
.text .content{margin:1em 0;}
.problem span{display: inline-block;border: 1px solid #ccc;border-radius: 2px;padding: 0 6px;margin-top: 10px}
.problem .is{color: #84cc62;border-color: #84cc62;}
.imgbox img{width: 100px;height: 100px;margin-right: 4px;}
</style>
